<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [{
      id: 0,
      title: "残酷月光 - 费启鸣",
      checked: false,
      collect: true
    }, {
      id: 1,
      title: "兄弟 - 艾热",
      checked: false,
      collect: false
    }, {
      id: 2,
      title: "毕生 - 夏增祥",
      checked: false,
      collect: true
    }, {
      id: 3,
      title: "公子向北去 - 李春花",
      checked: false,
      collect: false
    }, {
      id: 4,
      title: "战场 - 沙漠五子",
      checked: false,
      collect: false //是否收藏 true 收藏 false 没有收藏
    }];


    //获取全选按钮的状态函数 (放在最上面)
    //every 方法判断所有数据的checked属性都为true返回true,有一个false就返回false
    let isCheckAll = data => data.every(item => item.checked);

    //封装渲染数据函数
    renderDom = (data) => {
      //获取外部容器DOM元素
      const musicListEl = document.querySelector("#list");
      //初始化数据
      musicListEl.innerHTML = "";
      //遍历数据
      data.forEach((item, key) => {
        //创建 li DOM对象
        let liEl = document.createElement("li");
        //模板字符串渲染数据
        //三元表达式 设置数据动态切换
        let str = `
          <input type="checkbox" ${item.checked ? "checked" : ""}>
          <span>${item.title}</span>
          ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
        `
        //添加内容
        liEl.innerHTML = str;


        //收藏  取消收藏  删除   功能
        //在渲染数据创建li添加内容后, 事件委托给li绑定事件(因三元运算符原因,绑定事件不能同时绑定所有情况的按钮)
        liEl.onclick = (e) => {
          //判断触发事件元素的类名(是否包含这个类名,包含就true,不包含就false)
          // 类名 ID   e.target.classList.contains(“类名”)； 有则是true 无则是false
          console.log(e.target.classList.contains("collect"));
          if (e.target.classList.contains("collect")) {
            //对应下标的数据collect属性更改为true
            data[key].collect = true;
            //更改数据后调用渲染函数重新渲染
            renderDom(data);
          }
          if (e.target.classList.contains("cancelCollect")) {
            //对应下标的数据collect属性更改为false
            data[key].collect = false;
            //更改数据后调用渲染函数重新渲染
            renderDom(data);
          }
          //删除功能
          if (e.target.classList.contains("remove")) {
            //splice方法删除一条开始位置是点击获取的数据下标
            data.splice(key, 1);
            //如果数据都删除 没有长度  全选按钮改为false
            document.querySelector("#checkAll").checked = data.length && isCheckAll(data);
            //更改数据后调用渲染函数重新渲染
            renderDom(data);
          }

          // checkbox 渲染功能
          //判断点击事件触发元素  nodeName如果是input 
          if (e.target.nodeName === "INPUT") {
            //状态同步 事件源的checked属性 赋值给 当前点击的数据的checked属性
            data[key].checked = e.target.checked;
            //根据数据中checked属性判断是否全选(没有数据时也为false)
            document.querySelector("#checkAll").checked = data.length && isCheckAll(data);
          }

        }
        //追加li 到外部容器中
        musicListEl.appendChild(liEl);
      })
    }
    //调用渲染数据函数 传入参数数据data
    renderDom(data);


    //点击全选按钮 所有checkbox 的checked属性都为true或者false
    document.querySelector("#checkAll").onclick = function () {
      console.log(this);
      //遍历数据 全选按钮的checked属性值赋值给每条数据的checked属性
      data.forEach(item => item.checked = this.checked);
    //更改数据后调用渲染函数重新渲染
      renderDom(data);
    }


    //封装删除指定数据函数
    removeRender = (data) => {
      //获取底部删除DOM对象  添加点击事件
      document.querySelector("#remove").onclick = () => {
        //filter过滤数据  留下每条数据的checked属性为false的数据
        newData = data.filter(item => !item.checked)
        //数据改变后调用渲染函数重新渲染
        renderDom(newData);
      }
    }
    //调用底部删除功能传入参数data
    removeRender(data);

    //封装添加数据函数
    addRender = (data) => {
      //获取底部添加DOM对象 添加点击事件
      const addEl = document.querySelector("#add").onclick = () => {
        //获取底部input DOM对象
        const addIptEL = document.querySelector("#newInfo");
        //判断内容不能为空
        if ((addIptEL.value).trim()) {
          //构造一条数据
          let obj = {
            id: data.length,
            title: addIptEL.value,
            checked: false,
            collect: false
          }
          //创建的新数据添加进旧数据
          data.push(obj);
          //清空input 的value值 (清空显示)
          addIptEL.value = "";
          //数据改变后调用渲染函数重新渲染
          renderDom(data);
        } else {
          //输入内容为空弹出窗口
          return alert("请输入音乐名")
        }
      }
    }
    //调用添加函数传入数据参数
    addRender(data);
  </script>
</body>

</html>